/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
  <m-popover ref="popover" :ok-text="item && item.name ? $t('Edit') : $t('Submit')" @ok="_ok" @close="close">
    <template slot="content">
      <div style="padding:0 20px;">
        <el-form ref="myform" :model="form" :rules="rules" size="mini" label-position="right" label-width="100px">
          <el-form-item label="网络名称" prop="name">
            <el-input type="input" v-model.trim="form.name" maxlength="60" size="mini" placeholder="请输入网络名称">
            </el-input>
          </el-form-item>
          <el-form-item label="IP版本" prop="version">
            <el-select v-model.trim="form.version" placeholder="请选择" clearable>
              <el-option value="IPV4">IPV4</el-option>
              <el-option value="IPV6">IPV6</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联路由" prop="router">
            <el-select v-model.trim="form.router" placeholder="请选择" clearable>
              <el-option v-for="item in routeList" :key="item.id" :value="item.name">{{ item.name }}</el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </m-popover>
</template>
<script>
  import store from '@/conf/home/store'
  import mPopover from '@/module/components/popup/popover'
  import { mapActions } from 'vuex'
  export default {
    name: 'create-network',
    data () {
      return {
        store,
        routeList: [],
        form: {},
        rules: {
          name: [{ required: true, message: '请输入网络名称', trigger: 'blur' }],
          version: [{ required: true, message: '请选择IP版本', trigger: ['blur', 'change'] }],
          router: [{ required: true, message: '请选择关联路由', trigger: 'blur' }]
        }
      }
    },
    props: {
      item: Object
    },
    methods: {
      ...mapActions('router', ['getRouteListPaging']),
      async _ok () {
        if (!await this._verification()) {
          return
        }

        let $then = (res) => {
          this.$emit('onUpdate')
          this.$message.success(res.msg)
          this.$refs.popover.spinnerLoading = false
        }

        let $catch = (e) => {
          this.$message.error(e.msg || '')
          this.$refs.popover.spinnerLoading = false
        }

        if (this.item && this.item.id) {
          this.$refs.popover.spinnerLoading = true
          this.store.dispatch('network/updateNetwork', this.form).then(res => {
            $then(res)
          }).catch(e => {
            $catch(e)
          })
        } else {
          this.$refs.popover.spinnerLoading = true
          this.store.dispatch('network/createNetwork', this.form).then(res => {
            $then(res)
          }).catch(e => {
            $catch(e)
          })
        }
      },
      _verification () {
        return new Promise((resolve, reject) => {
          this.$refs.myform.validate(valid => {
            resolve(!!valid)
          })
        })
      },
      close () {
        this.$emit('close')
        setTimeout(() => {
          this.$refs.myform.resetFields()
          this.$refs.myform.clearValidate()
        }, 800)
      }
    },
    watch: {
      item: {
        handler (val, oldVal) {

        },
        deep: true
      }
    },
    created () {
      if (this.item) {
        this.form = Object.assign({}, this.form, this.item)
      }
      this.getRouteListPaging({ pageSize: 1000, pageNum: 1 }).then(res => {
        if (res.code === 200) {
          this.routeList = res.rows
        }
      })
    },
    mounted () {
    },
    components: { mPopover }
  }
</script>
